<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI Pro</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="../../dist/css/vendor/bootstrap.min.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="../../dist/css/flat-ui.css" rel="stylesheet">

    <link rel="shortcut icon" href="../../dist/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="../../dist/js/vendor/html5shiv.js"></script>
      <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">

        <h4>Select</h4>

        <h6>Big string</h6>
        <form action="#" type="get">
          <select data-toggle="select" class="form-control select select-default mrs mbm">
            <option value="0">My Profile</option>
            <option value="1">My Friends</option>
            <option value="2">My Profile</option>
            <option value="3">My Friends</option>
          </select>

          <input type="submit" value="Submit" class="btn">

        </form>

        <h6>Optroups</h6>

        <select data-toggle="select" class="form-control select select-default mrs mbm">
          <optgroup label="Profile">
            <option value="0">My Profile</option>
            <option value="1">My Friends</option>
          </optgroup>
          <optgroup label="System">
            <option value="2">Messages</option>
            <option value="3">My Settings</option>
            <option value="4">Logout</option>
          </optgroup>
        </select>

        <h6>Disabled Select</h6>

        <select data-toggle="select" class="form-control select select-default mrs mbm" disabled>
          <option value="0" disabled>My Profile</option>
          <option value="1">My Friends</option>
          <option value="2">Messages</option>
          <option value="3" disabled>My Settings</option>
          <option value="4">Logout</option>
        </select>

        <h6>Disabled Options</h6>

        <select data-toggle="select" class="form-control select select-default mrs mbm">
          <option value="0" disabled>My Profile</option>
          <option value="1">My Friends</option>
          <option value="2">Messages</option>
          <option value="3" disabled>My Settings</option>
          <option value="4">Logout</option>
        </select>

        <h6>Inversed Dropdown</h6>

        <select data-toggle="select" name="inverse-dropdown" class="form-control select select-default mrs mbm">
          <option value="0">My Profile</option>
          <option value="1">My Friends</option>
          <option value="2">Messages</option>
          <option value="3">My Settings</option>
          <option value="4">Logout</option>
        </select>

        <h6>Inversed Dropdown + Optgroups</h6>

        <select data-toggle="select" name="inverse-dropdown-optgroup" class="form-control select select-default mrs mbm">
          <optgroup label="Profile">
            <option value="0">My Profile</option>
            <option value="1">My Friends</option>
          </optgroup>
          <optgroup label="System">
            <option value="2">Messages</option>
            <option value="3">My Settings</option>
            <option value="4">Logout</option>
          </optgroup>
        </select>

        <h6>Inversed Dropdown + Disabled Options</h6>

        <select data-toggle="select" name="inverse-dropdown-disabled" class="form-control select select-default mrs mbm">
          <option value="0" disabled>My Profile</option>
          <option value="1">My Friends</option>
          <option value="2">Messages</option>
          <option value="3" disabled>My Settings</option>
          <option value="4">Logout</option>
        </select>

        <h6>Visible search field</h6>

        <select data-toggle="select" name="searchfield" class="form-control select select-default mrs mbm">
          <option value="0">My Profile</option>
          <option value="1">My Friends</option>
          <option value="2">Messages</option>
          <option value="3">My Settings</option>
          <option value="4">Logout</option>
        </select>

        <h6>Inversed Dropdown + Visible search field</h6>

        <select data-toggle="select" name="inverse-dropdown-searchfield" class="form-control select select-default mrs mbm">
          <option value="0">My Profile</option>
          <option value="1">My Friends</option>
          <option value="2">Messages</option>
          <option value="3">My Settings</option>
          <option value="4">Logout</option>
        </select>

        <h6>Color variants</h6>

        <select data-toggle="select" class="form-control select select-default mrs mbm">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-inverse mrs mbm">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-primary mrs mbm">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-info mrs mbm">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-danger mrs mbm">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-success mrs mbm">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-warning mrs">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Friends</option>
        </select>

        <h6>Custom sizes</h6>

        <select data-toggle="select" class="form-control select select-default select-hg mrs">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Dear Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-default select-lg mrs">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Dear Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-default mrs">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Dear Friends</option>
        </select>

        <select data-toggle="select" class="form-control select select-default select-sm mrs">
          <option value="0">My Profile here is</option>
          <option value="1">My Friends</option>
          <option value="2">My Profile</option>
          <option value="3">My Dear Friends</option>
        </select>

        <h6>Select with .form-group</h6>

        <div class="form-group">
          <select data-toggle="select" class="form-control select select-primary select-lg">
            <option value="0">My Profile here is</option>
            <option value="1">My Friends</option>
            <option value="2">My Profile</option>
            <option value="3">My Friends</option>
          </select>
        </div>

        <div class="form-group">
          <select data-toggle="select" class="form-control select select-inverse">
            <option value="0">My Profile here is</option>
            <option value="1">My Friends</option>
            <option value="2">My Profile</option>
            <option value="3">My Dear Friends</option>
          </select>
        </div>

        <br><br>

        <h4>Multi select</h4>

        <h6>Big string</h6>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-default">
          <option value="0" selected>Floccinaucinihilipilification</option>
          <option value="2">3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <h6>Multi select disabled</h6>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-success mrs mbm" disabled>
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <h6>Color variants</h6>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-default mrs mbm">
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-inverse mrs mbm">
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-primary mrs mbm">
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-info mrs mbm">
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-danger mrs mbm">
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-success mrs mbm">
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <select data-toggle="select" multiple class="form-control multiselect multiselect-warning mrs mbm">
          <option value="0" selected>1 option</option>
          <option value="1">2 option</option>
          <option value="2" selected>3 option</option>
          <option value="3">4 option</option>
          <option value="4">5 option</option>
        </select>

        <br><br><br><br><br><br><br>
    </div><!-- /.container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <!-- Bootstrap 4 requires Popper.js -->
    <script src="https://unpkg.com/popper.js@1.14.1/dist/umd/popper.min.js" crossorigin="anonymous"></script>

    <script src="../../dist/scripts/flat-ui.js"></script>

    <script src="../assets/js/application.js"></script>

    <script>
      $(document).ready(function(){
        $('select[name="inverse-dropdown"], select[name="inverse-dropdown-optgroup"], select[name="inverse-dropdown-disabled"]').select2({dropdownCssClass: 'select-inverse-dropdown'});

        $('select[name="searchfield"]').select2({dropdownCssClass: 'show-select-search'});
        $('select[name="inverse-dropdown-searchfield"]').select2({dropdownCssClass: 'select-inverse-dropdown show-select-search'});
      });
    </script>

  </body>
</html>
